<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
        }
    </style>
    <script src="MAPURL?v=3.exp&sensor=false&language=LANGTOKEN&region=REGIONTOKEN"></script>
    <script src="file:///android_asset/geolocate_user.js" type="text/javascript"></script>
    <script>
var map;
var infoWindow = null;
var markers = {};
var infoWindowContent = {};
var polylines = {};
var polygons = {};
var moveTimeout;
var GeoMarker = null;
var markerIconPrefix;

function initialize() {
  var mapOptions = {
    zoom: 10,
    disableDefaultUI: true,
    center: new google.maps.LatLng(0, 0)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  GeoMarker = new GeolocationMarker();
  GeoMarker.setCircleOptions({fillColor: '#808080'});

  // Access to an overlay allows us to easily find pixel location on the map
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);

  google.maps.event.addListener(map, 'click', mapClick);
  google.maps.event.addListener(map, 'center_changed', mapMove)

  AirMapView.onMapLoaded();
}

function getMarkerIcon(iconFile) {
  if (markerIconPrefix === undefined) {
    markerIconPrefix = AirMapView.isChinaMode() ? 'http://ditu.google.cn/mapfiles/ms/icons/' : 'http://maps.google.com/mapfiles/ms/icons/';
  }
  return markerIconPrefix + iconFile;
}

function startTrackingUserLocation() {
    GeoMarker.setMap(map);
}

function stopTrackingUserLocation() {
    GeoMarker.setMap(null);
}

function clearMarkers() {
  for (var key in markers) {
    markers[key].setMap(null);
  }
  markers = {};
}

function setBounds(neLat, neLng, swLat, swLng) {
  var sw = new google.maps.LatLng(swLat, swLng);
  var ne = new google.maps.LatLng(neLat, neLng);
  var center = new google.maps.LatLngBounds(sw, ne);
  map.fitBounds(center)
}

function centerMap(lat, lng) {
  var latLng = new google.maps.LatLng(lat, lng);
  map.setCenter(latLng);
}

function setZoom(zoom) {
  map.setZoom(zoom);
}

function highlightMarker(markerId) {
  var marker = markers[markerId];
  if (marker != null) {
    marker.setIcon(getMarkerIcon('purple-dot.png'));
  }
}

function unhighlightMarker(markerId) {
  var marker = markers[markerId];
  if (marker != null) {
    marker.setIcon(getMarkerIcon('red-dot.png'));
  }
}

function addMarker(lat, lng) {
  var position = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
      position: position,
      map: map,
      icon: getMarkerIcon('green-dot.png')
  });
}

function addMarkerWithId(lat, lng, id, title, snippet) {
  addMarkerWithId(lat, lng, id, title, snippet, false);
}

function addMarkerWithId(lat, lng, id, title, snippet, draggable) {
  var position = new google.maps.LatLng(lat, lng);
  var marker = new google.maps.Marker({
      position: position,
      map: map,
      icon: getMarkerIcon('red-dot.png'),
      draggable: draggable
  });

  if(title != "null" || snippet != "null") {
    var content = document.createElement("div");
    if(title != "null")  {
        content.innerHTML += '<div id="title"><b>' + title + '</b></div>';
    }

    if(snippet != "null") {
        content.innerHTML += '<div id="snippet">' + snippet + '</div>';
    }

    infoWindowContent[id] = content;
  }

  google.maps.event.addListener(marker, 'click', function() {
    map.panTo(marker.position);
    AirMapView.markerClick(id);
  });
    google.maps.event.addListener(marker, 'dragstart', function() {
    AirMapView.markerDragStart(id, marker.position.lat(), marker.position.lng());
  });
  google.maps.event.addListener(marker, 'drag', function() {
    AirMapView.markerDrag(id, marker.position.lat(), marker.position.lng());
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    AirMapView.markerDragEnd(id, marker.position.lat(), marker.position.lng());
  });

  markers[id] = marker;
}

function moveMarker(lat, long, id) {
  var marker = markers[id];
  if (marker != null) {
    marker.setPosition( new google.maps.LatLng(lat, long) );
  }
}

function showDefaultInfoWindow(id){
    if(infoWindow){
        infoWindow.close();
    }
    if(id in infoWindowContent){
        infoWindow = new google.maps.InfoWindow({
            content: infoWindowContent[id]
        });
        infoWindow.open(map, markers[id]);
        google.maps.event.addDomListener(infoWindowContent[id], 'click', function() {
            AirMapView.defaultInfoWindowClick(id);
        });
    }
}

function removeMarker(id) {
  var marker = markers[id];
  if (marker != null) {
    marker.setMap(null);
  }
}

function addPolyline(points, id, width, color) {
  color = formatColor(color);
  var polyLine = new google.maps.Polyline({
    map: map,
    path: points,
    strokeColor: color,
    strokeWeight: width / 2
  });

  polylines[id] = polyLine;
}

function removePolyline(id) {
  var polyline = polylines[id];
  if (polyline != null) {
    polyline.setMap(null);
  }
}

function removeAllPolylines() {
  for (var key in polylines) {
    removePolyline(key);
  }
  polylines = {};
}

function addPolygon(points, id, strokeWidth, strokeColor, fillColor) {
  strokeColor = formatColor(strokeColor);
  fillColor = formatColor(fillColor);
  var polygon = new google.maps.Polygon({
    map: map,
    paths: points,
    strokeColor: strokeColor,
    strokeWeight: strokeWidth / 2,
    fillColor: fillColor
  });

  polygons[id] = polygon;
}

function removePolygon(id) {
  var polygon = polygons[id];
  if (polygon != null) {
    polygon.setMap(null);
  }
}

function addCircle(lat, lng, radius, strokeColor, strokeWeight, fillColor) {
  var position = new google.maps.LatLng(lat, lng);
  var populationOptions = {
      strokeColor: formatColor(strokeColor),
      strokeOpacity: 0.50,
      strokeWeight: strokeWeight,
      fillColor: formatColor(fillColor),
      fillOpacity: 0.35,
      map: map,
      center: position,
      radius: radius
    };
    cityCircle = new google.maps.Circle(populationOptions);
}

function mapClick(event) {
  AirMapView.mapClick(event.latLng.lat(), event.latLng.lng());
  if(infoWindow){
    infoWindow.close();
  }
}

function mapMove() {
  if (moveTimeout != null) {
    clearTimeout(moveTimeout);
  }
  // javascript bridge not fast enough to handle events immediately.
  moveTimeout = setTimeout(function() {
    var latLng = map.getCenter();
    if (latLng != null) {
      AirMapView.mapMove(latLng.lat(), latLng.lng(), map.getZoom());
    }
  }, 200);
}

function getCenter() {
  var latLng = map.getCenter();
  if (latLng != null) {
    AirMapView.mapCenterCallback(latLng.lat(), latLng.lng());
  }
}

function setMapTypeId(mapType) {
  map.setMapTypeId(mapType);
}

function getBounds() {
  bounds = map.getBounds();
  ne = bounds.getNorthEast();
  sw = bounds.getSouthWest();
  AirMapView.getBoundsCallback(ne.lat(), ne.lng(), sw.lat(), sw.lng());
}

function getScreenLocation(lat, lng) {
    latLng = new google.maps.LatLng(lat, lng)
    screenLocation = overlay.getProjection().fromLatLngToContainerPixel(latLng);
    AirMapView.getLatLngScreenLocationCallback(screenLocation.x, screenLocation.y)
}

// converts an android int color to a web color :)
function formatColor(color) {
  return '#' + ('000000' + (0xFFFFFF & color).toString(16)).slice(-6);
}

/**
 * Add GeoJson info to this web map's data layer
 * @param {string} geojson - valid json with geo info
 * @param {float} strokeWidth - width of stroke
 * @param {int} strokeColor - color of border
 * @param {int} fillWidth - color filled inside border
 */
function addGeoJsonLayer(jsonString, strokeWidth, strokeColor, fillColor) {
  var strokeWebColor = formatColor(strokeColor);
  var fillWebColor = formatColor(fillColor);
  map.data.setStyle({
      fillColor: strokeWebColor,
      strokeColor: fillWebColor,
      strokeWeight: strokeWidth
    });
  map.data.addGeoJson(jsonString);
}

function removeGeoJsonLayer() {
  map.data.forEach(function(feature) {
    map.data.remove(feature);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
